

.bg-white{background-color:#fff!important}

.bg-white-50{background-color:rgba(#fff,.5)}
.bg-dark-50{background-color:rgba(#000,.5)}

.bg-grad-primary{
  @include diagonalGradient($primary-dark, $primary-light);
}

.bg{background-color:$bg!important;}
.bg2{background-color:$bg-dark!important;}
.bg-purple {   background-color: $purple;}
.bg-orange {   background-color: $orange;}
.bg-green {   background-color: $green;}
.bg-blue {   background-color: $blue;}

.bg-pattern{
	background-image: url(../images/banners/bg-pattern.svg), -webkit-linear-gradient(315deg, $primary, $primary-dark);
    background-image: url(../images/banners/bg-pattern.svg), linear-gradient(135deg, $primary, $primary-dark);
    background-size: cover, auto;
    background-repeat: no-repeat, repeat;
    background-position: 0px 0px, 50% 50%;
}

.bg-img{ overflow: hidden;
  background-color:#ddd;
  background-image: -webkit-linear-gradient(315deg, rgba($primary-light, .8), rgba($primary-dark, .9)), url("../images/banners/bg-cpu.jpg");
  background-image: linear-gradient(135deg, rgba($primary-light, .8), rgba($primary-dark, .9)), url("../images/banners/bg-cpu.jpg");
  background-position: 0px 0px, 50% 50%;
  background-size: auto  cover;
}

.overlay-grad {position:relative;
    &:before{position:absolute; content:""; display:block; top:0; left:0; right:0; bottom:0;
        opacity:.6; transition:.5s;
        @include diagonalGradient($primary, $secondary);  
    }
    &:hover:before{opacity:.9;}
}